/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require fancybox
 *= require jquery.socialshareprivacy.min.css
 *= require_tree .
 */

/* Prevent shifting on pages that don't need scrolling */
html {
  overflow-y: scroll;
}

body {
	margin: 0;
	background-color: #F6F6F6;
}
body, select, input {
	font-family: "Open Sans", sans-serif;
}

a {
	color: #670000;
}
a:visited {
	color: #A42121;
}

#main-header {
	background-color: #670000;
	background-image: linear-gradient(#670000, #990000);
	padding: 0.25em 0;
}
.width-constraint {
	margin: auto;
	max-width: 960px;
}

#main-header .width-constraint {
	padding: 0 0 0.25em 0;
	/* enable absolute positioning for children */
	position: relative;
}
#site-name img {
	vertical-align: bottom;
}
#site-name-text {
	display: inline-block;
	vertical-align: top;
}
#site-name-text h1  {
	line-height: 1.1em;
}

#main-header, #main-header a, #main-header a:visited, #main-header a:active {
	color: white;
}
#main-header h1 {
	font-size: 72px;
	margin: 0;
	margin-top: 0px;
	letter-spacing: -2px;
}
#main-header h1 a {
	text-decoration: none;
}
#main-header .subtitle {
	margin: -8px 0 0 10px;
	font-size: 0.7em;
	/* in case it overlaps the y in Greasy */
	text-shadow: -1px -1px 0px #670000, 1px -1px 0px #670000, -1px 1px 0px #670000, 1px 1px 0px #670000;
}

#site-nav nav, #nav-user-info {
	text-align: right;
	position: absolute;
	right: 0;
}
#site-nav nav {
	bottom: 0;
}
#nav-user-info {
	top: 0;
}
nav a:hover {
	color: white;
}
nav {
	padding: 0;
}
nav li {
	list-style-type: none;
	display: inline;
}
nav li + li {
	margin-left: 0.5em;
}
#script-search, #language-selector {
	display: inline;
}
#nav-user-info {
	font-size: small;
}
#nav-user-info select, #nav-user-info input {
	font-size: 11px;
}

#script-info {
	border: 1px solid #BBBBBB;
	border-radius: 5px;
	clear: left;
	background-color: white;
	margin: 1em 0;
	box-shadow: 0 0 5px #DDDDDD;
}

#script-content {
	margin-top: 1.5em;
}
#script-content > *:first-child {
	margin-top: 0;
}
#script-info header h2 {
	margin: 0.25em 0 0 0;
	font-size: 2em;
}
#script-description {
	margin: 0;
}
#version-note {
	font-style: italic;
	background-color: #FFFF99;
	border: 2px dotted #CC9999;
	padding: 0.5em;
}
#script-feedback-suggestion {
	margin: 0.75em 0;
}

#script-links {
	list-style: none;
	padding: 0 1em;
	margin: 0 -1em 0;
}
#script-links li {
	display: inline-block;
	margin: 0 -4px 0 0;
}
#script-links li > * {
	padding: 0.25em .5em .5em;
	display: block;
}
#script-links a {
	text-decoration: none;
}
#script-links .current {
	background: rgba(0, 0, 0, 0.03);
	position: relative;
	top: -4px;
	font-weight: bold;
	border-top: 7px solid #990000;
	box-shadow: inset 1px 0 rgba(0, 0, 0, 0.1), inset -1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px rgba(0, 0, 0, 0.1);
}
/* shift the text back up to align with the others */
#script-links .current > * {
	position: relative;
	top: 4px;
}
#script-links a:hover, #script-links a:focus {
	background: rgba(0, 0, 0, 0.03);
	position: relative;
	top: -4px;
	box-shadow: inset 1px 0 rgba(0, 0, 0, 0.1), inset -1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px rgba(0, 0, 0, 0.1);
	padding-top: 8px;
}
#script-links a:hover span, #script-links a:focus span {
	position: relative;
	top: 4px;
}

#install-area {
	margin-bottom: 1em;
}
#install-area a:hover, #install-area a:focus {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.install-link, .install-link:visited, .install-link:active, .install-link:hover, .install-help-link {
	display: inline-block;
	background-color: #005200;
	padding: 0.5em 1em;
	color: white;
	text-decoration: none;
}
.install-help-link, .install-help-link:visited, .install-help-link:active, .install-help-link:hover {
	background-color: #1E971E;
	color: white;
}
.script-in-sets {
	display: inline-block;
	margin-left: 1em;
}
#script-meta {
	display: table;
	font-size: small;
}
#script-meta > * {
	margin-bottom: 1em;
}
#script-meta > dl dd {
	max-width: 50%;
}
#script-stats, #script-stats dt, #script-stats dd, #script-applies-to, #script-applies-to dt, #script-applies-to dd {
	vertical-align: top;
	margin: 0;
	padding: 0;
}
#script-stats {
	padding-right: 1em;
	min-width: 18em;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;
	column-gap: 1em;
}
#script-stats dt, #script-meta dt {
	clear: left;
	float: left;
	width: 12em;
	font-weight: bold;
}
#script-stats dd, #script-meta dd{
	float: left;
	min-width: 12em;
}
#script-applies-to dt:after, #script-meta dt:after {
	content: ":";
}
.inline-list {
	display: inline;
	padding-left: 0;
	list-style: none;
}
.inline-list li {
	display: inline;
}
.inline-list li:after {
	content: ", ";
}
.inline-list li:last-child:after {
	content: "";
}
dt[title] > span {
	border-bottom: 1px dotted black;
}


#additional-info > div {
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #E6DDD6;
	background-color: #F2E5E5;
}
#additional-info > div:not(:first-of-type) {
	padding-top: 0.5em;
}
.script-author-description > *:first-child {
	margin-top: 0;
}
.script-author-description > *:last-child {
	margin-bottom: 0;
}
.script-author-description img {
	max-width: 100%;
}
.script-screenshots * {
	vertical-align: middle;
}
.script-screenshots a {
	text-decoration: none;
}

.form-control {
	margin-bottom: 1em;
}
.form-control textarea, #ace-editor {
	width: 100%;
	height: 20em;
	box-sizing: border-box;
	margin-top: 1px;
	margin-bottom: 1px;
}
#ace-editor {
	border: 1px solid #BBB;
	border-style: inset;
}
.form-control input:not([type=radio]):not([type=file]):not([type=checkbox]):not([type=search]):not([size]) {
	box-sizing: border-box;
	width: 100%;
}
.radio-group input[type=radio] {
	margin-left: 1em;
}
.form-control label {
	font-weight: bold;
}
.form-control label.radio-label, .form-control label.checkbox-label {
	font-weight: normal;
}
.field_with_errors textarea {
	background-color: #FEE;
}
.label-note {
	font-size: smaller;
}
.screenshots-controls > *:not(label) {
	padding-left: 1em;
}
.add-screenshot-control, .screenshot-control {
	clear: left;
}
.screenshot-control > * {
	vertical-align: middle;
}
.screenshot-control a {
	float: left;
	min-width: 150px;
	text-align: center;
}

#script-info, .user-list, .text-content {
	padding: 0 1em 1em;
}
.script-list {
	padding: 0;
}

.script-list, .user-list, .text-content {
	list-style-type: none;
	box-shadow: 0 0 5px #DDDDDD;
	background-color: white;
	border: 1px solid #BBBBBB;
	border-radius: 5px;
	box-sizing: border-box;
	margin: 14px 0;
}
.user-list {
	padding: 1em;
	margin: 1em 0;
}
.list-option-groups ~ ol {
	width: calc(960px - 14em);
}
.text-content .list-option-groups ~ ol {
	width: calc(960px - 16em);
}
.script-list li {
	border-bottom: 1px solid #DDDDDD;
	padding: 1em;
}
.script-list h2 {
	margin: 0;
	font-size: 18px;
}
.script-list p {
	margin: 0;
}
.script-list footer {
	margin-top: 0.25em;
}
.script-list dl {
	font-size: smaller;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 0;
	-webkit-column-gap: 0;
	column-gap: 0;
	max-width: 45em;
	margin: 0;
}
.script-list dt, .script-list dd {
	margin: 0;
	padding: 0;
}
.script-list dd {
	color: #666;
}
.script-list dt::after {
	content: "";
}
.script-list dt {
	clear: left;
	float: left;
	width: 10em;
	padding-right: 1em;
	padding-left: 1em;
}
.script-list dl dt span {
	float: right;
	font-weight: bold;
}
.script-list dd {
	float: left;
}
.list-current {
	font-weight: bold;
}
.script-list h2 {
	font-weight: bold;
}
.script-list .description {
	font-weight: normal;
	display: block;
	margin: .5em 0;
	font-size: smaller;
}
.script-list .name-description-separator {
	display: none;
}
#script-description,
.script-list h2 > a,
.script-list .description {
	word-wrap: break-word;
}
.pagination, .script-list + .pagination, .user-list + .pagination {
	font-size: 18px;
	display: block;
	background-color: transparent;
	padding: 0;
	margin: 0;
	border-radius: 5px;
}
.pagination > *, .script-list + .pagination > *, .user-list + .pagination > * {
	display: inline-block;
	background-color: #F2E5E5;
	padding: 0.5em;
	border-radius: 5px;
	text-decoration: none;
}
.pagination .disabled {
	display: none;
}
.pagination .current {
	font-style: normal;
	font-weight: bold;
}
.pagination .current, .pagination .gap {
	background-color: transparent;
}
.pagination > a:hover, .pagination > a:focus {
	background-color: #e2c5c5;
}

.good-rating-count, .ok-rating-count, .bad-rating-count {
	display: inline-block;
	min-width: 1em;
	text-align: center;
	padding: 0 0.25em;
	border: 1px solid #DDDDDD;
	border-radius: 10px;
}
.good-rating-count {
	background-color: rgba(51, 155, 51, 0.1);
	border-color: rgba(51, 155, 51, 0.3);
	color: #1E971E;
	color: rgba(51, 155, 51, 1);
}
.ok-rating-count {
	background-color: rgba(155, 155, 0, 0.1);
	border-color: rgba(155, 155, 0, 0.3);
	color: #a80;
	color: rgba(155, 155, 0, 1);
}
.bad-rating-count {
	background-color: rgba(155, 51, 51, 0.1);
	border-color: rgba(155, 51, 51, 0.3);
	color: rgba(155, 51, 51, 1);
}



/* activated by js */
.select-all, .select-none {
	display: none;
}

.diff {
	border: 2px solid black;
}

#help-allowed-elements {
	-moz-column-width: 15em;
	-webkit-column-width: 15em;
	column-width: 15em;
}
#help-allowed-elements li {
	padding-right: 1em;
}

#by-site-list {
	list-style-type: none;
	padding: 0;	
}
#by-site-list li {
	display: inline;
	vertical-align: middle;
}

/* Edit */
#user_profile {
	width: 100%;
	height: 10em;
}
/* View */
#user-profile {
	border: 1px solid #E6DDD6;
	background-color: #F2E5E5;
	padding: 1em;
}

.preview-button {
	
}
.preview-result {
	display: none;
	background-color: #FFA;
	padding: 0.5em;
}

.failed-sync {
	background-color: #FCC;
}

.discussion-question {
	list-style-image: url(/images/circle-blue.png);
}
.discussion-report {
	list-style-image: url(/images/report.png);
}
.discussion-bad {
	list-style-image: url(/images/circle-red.png);
}
.discussion-ok {
	list-style-image: url(/images/circle-yellow.png);
}
.discussion-good {
	list-style-image: url(/images/circle-green.png);
}

.alert {
	font-style: italic;
	background-color: #FFFFCC;
	border: none;
 	border-left: 6px solid #FFEB3B;
	padding: 0.5em;
}
.notice {
	background-color: #D9EDF7;
	border: none;
	border-left: 6px solid #31708F;
	padding: 0.5em;
}

.front-page-p {
	margin-bottom: 0;
}
.front-page-box {
	display: inline-block;
	width: 45%;
	vertical-align: top;
	text-align: justify;
}
.front-page-box:first-of-type {
	padding-right: 6%;
}
@media (max-width: 600px) {
	.front-page-box {
		display: block;
		width: auto;
		padding: 0;
	}
}

#install-stats-chart {
	width: 100%;
	height: 400px;
}
.stats-table {
	border-collapse: collapse;
}
.stats-table th, .stats-table td {
	border: 1px solid gray;
	padding: 0 0.5em;
}
td.numeric, th.numeric {
	text-align: right;
}

.list-option-groups {
	margin-top: 1em;
	float: right;
	width: 15em;
	font-size: smaller;
	margin-left: 2em;
}
.list-option-group {
	margin-bottom: 1em;
}
.list-option-group ul {
	margin: .5em 0 0;
	list-style-type: none;
	padding: 1em 0;
	box-shadow: 0 0 5px #DDDDDD;
	border: 1px solid #BBBBBB;
	border-radius: 5px;
	background-color: white;
}
.list-option-group a {
	padding: .35em 1em;
	display: block;
}
.list-option-group a:hover, .list-option-group a:focus {
	background: linear-gradient(white, #F6F6F6);
	text-decoration: none;
	box-shadow: inset 0 -1px #DDDDDD, inset 0 1px #EEEEEE;
}
.list-option-group .list-current {
	border-left: 7px solid #800;
	box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), inset 0 -1px rgba(0, 0, 0, 0.1);
	margin: .25em 0 .25em -4px;
	padding: .4em 1em .4em calc(1em - 3px);
	background: linear-gradient(white, #EEEEEE);
}

.translation_missing {
	outline: dashed red;
}

#edit_user > div {
	margin-bottom: 0.5em;
}
#edit_user > div > label:first-child {
	font-weight: bold;
}

.inline-form {
	display: inline;
}

:target {
	background-color: #F2E5E5;
}
a.self-link, a.self-link:visited {
	text-decoration: none;
	color: black;
	opacity: 0.2;
}

.indented {
	padding-left: 1em;
}

.expander {
	cursor: pointer;
	padding: 2px 5px;
	color: #670000;
	border-radius: 3px;
	background-color: #F2E5E5;
	text-decoration: underline;
}

#script-show-info-ad {
	width: 732px;
	box-sizing: border-box;
	margin: 1.5em auto;
}
.ad-note {
	font-size: x-small;
	line-height: 1em;
	max-width: -webkit-max-content;
	max-width: -moz-max-content;
	max-width: max-content;
	border-top: 2px solid #E7CF87;
	border-left: 2px solid #E7CF87;
	border-right: 2px solid #E7CF87;
	padding: 0 0.5em;
}
.ad-note, .ad-content {
	background-color: #E7CF87;
}
.ad-content {
	border: 2px solid #E7CF87;
}
.ad-content > * {
	vertical-align: bottom;
}

.social_share_privacy_area.box li.settings_info {
	/* Shrink a bit */
	height: 20px;
	width: 135px;
	/* Show on separate line */
	display: block;
}

pre, code, #code-container {
	border-radius: 2px;
	border: 1px solid #E6DDD6;
	background-color: #F2E5E5;
}
pre.CodeRay, table.CodeRay, .CodeRay pre {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}
/* Non-syntax highlighted block */
pre.CodeRay {
	padding: 4px 8px;
}
.CodeRay .line-numbers pre, .CodeRay .line-numbers pre a {
	background-color: transparent !important;
}
.CodeRay .line-numbers {
	background-color: #E6DDDD !important;
}
.CodeRay .line-numbers, .CodeRay .code {
	/* Otherwise tall characters can make these not align */
	line-height: 1em;
}
.CodeRay {
	-moz-tab-size: 4;
	tab-size: 4;
}

.external-login {
	padding: 2px 2px 3px 22px;
	border: 1px solid black;
	border-radius: 2px;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: 5px 4px;
}
.external-login-container {
	display: inline-block;
	vertical-align: top;
}
.external-login-container * {
	text-align: center;
	display: block;
}
.external-login-container > *:not(button) {
	font-size: smaller;
}
.external-login-container:not(:last-child) {
	margin-right: 5px;
}
.external-login-container .github-login {
	background-image: url('<%=asset_path 'github-32.png'%>');
}
.external-login-container .google_oauth2-login {
	background-image: url('<%=asset_path 'google-32.png'%>');
}

/* sign_up, sign_in and password/new */
body .width-constraint > .text-content > h2,
body .width-constraint > .text-content > h3 {
	text-align: center;
}
form.external-login-form {
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 1em;
	background-color: #fff;
	border: 1px solid #d8dee2;
	border-radius: 5px;
	text-align: center;
}
form.new_user {
	position: relative;
	width: 340px;
	margin: 0 auto;
	padding: 1em;
	background-color: #fff;
	border: 1px solid #d8dee2;
	border-radius: 5px;
	text-align: left;
}
form.new_user label {
	display: block;
	font-size: small;
}
form.new_user br {
	display: none;
}
form.new_user input[type="text"],
form.new_user input[type="email"],
form.new_user input[type="password"] {
	display: block;
	width: 100%;
	min-height: 34px;
	box-sizing: border-box;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
	padding: 6px 8px;
	font-size: 14px;
	line-height: 20px;
	vertical-align: middle;
	color: #333;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	outline: none;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
form input[type="checkbox"],
form input[type="checkbox"] + label {
	display: inline-block;
	font-size: small;
}
form.new_user input[type="submit"] {
	display: block;
	width: 100%;
	min-height: 34px;
	box-sizing: border-box;
	margin: 0.5em 0 0 0;
	padding: 6px 8px;
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	background-color: #670000;
	background-image: linear-gradient(#990000, #670000);
	border: 1px solid #ddd;
	border-radius: 3px;
}
form.new_user ~ br {
	display: none
}
form.new_user ~ a {
	width: 340px;
	display: block;
	margin: 0 auto 2em;
	font-size: small;
}
form.new_user + a {
	width: 340px;
	display: block;
	margin: 0 auto;
}
.nav-search #script-search, .sidebar-search {
	position: relative;
	vertical-align: middle;
}
.nav-search #script-search input[type=search], .sidebar-search input[type=search] {
	padding-right: 20px;
}
.nav-search #script-search input[type=search] {
	width: 175px;
}
.sidebar-search input[type=search] {
	width: 100%;
	margin: 0 0 1em 0;
}
.nav-search #script-search input[type=submit], .sidebar-search input[type=submit] {
	position: absolute;
	-moz-appearance: none;
	-webkit-appearance: none;
	right: 0;
	top: 0;
	border-color: transparent;
	padding-left: 0;
	padding-right: 6px;
	margin-left: 0;
	margin-right: 0;
	background: none;
	opacity: 0.5;
}
